<template>
  <div id="fu">
    <div id="desc">
      <i class="el-icon-finished"></i>
      <span>成绩录入</span>
    </div>

    <div class="contine">
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="11" :offset="13">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.cname" placeholder="课程名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formInline.uname" placeholder="学生名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 分页条 -->
      <el-row class="el-nav">
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            :pager-count="pageCount"
            :page-size="formInline.pageSize"
            :page-count="formInline.pageNum"
            :total="formInline.total"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 表格内容 -->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">

            <el-table-column
              prop="scId"
              label="成绩ld"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="studentName"
              label="学生姓名">
            </el-table-column>
            <el-table-column
              prop="scDailyScore"
              label="日常分">
            </el-table-column>
            <el-table-column
              prop="scExamScore"
              label="笔试分">
            </el-table-column>
            <el-table-column
              prop="scScore"
              label="成绩">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">打分
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="30%">

      <el-form :model="form">
        <el-form-item label="成绩Id" label-width="80px">
          <el-input  v-model="form.scId" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日常成绩" label-width="80px">
          <el-input type='number' v-model="form.scDailyScore" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="笔试成绩" label-width="80px">
          <el-input type='number' v-model="form.scExamScore" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总成绩" label-width="80px">
          <el-input type='number' v-model="form.scScore" disabled autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="UpdateScore">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {get, post} from "../../common/request";

export default {
  name: "TeacherAddScore",
  data() {
    return {
      formInline: {
        cname: "",
        uname: "",
        pageNum: 1,
        pageSize: 8,
        total: 0
      },
      pageCount: 5,
      tableData: [],
      //模态框的属性
      dialogFormVisible: false,
      title: "",
      form: {
        scId: "",
        scDailyScore: "",
        scExamScore: "",
        scScore: ""
      }
    }
  },
  methods: {
    //搜索事件
    onSubmit() {
      this.getData();
    },
    //分页插件的处理
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formInline.pageNum = val;
      this.getData();
    },
    //处理模态框的关闭事件
    handleClose() {
    },
    //点击操作的函数处理
    handleEdit(index, row) {
      //打开模态框的处理
      this.dialogFormVisible = true;
      this.title = row.studentName;
      this.form.scId = row.scId;
      this.form.scDailyScore = row.scDailyScore;
      this.form.scExamScore = row.scExamScore;
      this.form.scScore = row.scScore;
    },

    UpdateScore() {
      post("/student-course/teacher-update-score/", this.form).then(x => {
        if (x.code === 1) {
          this.$message.success(x.msg)
          this.dialogFormVisible = false;
          this.getData();
        } else {
          this.$message.error(x.data[0]);
        }
      })
    },
    getData() {
      get("/course/getScoreInfo", this.formInline).then(x => {
        this.tableData = x.data.list;
        this.formInline.pageNum = x.data.pageNum;
        this.formInline.pageSize = x.data.pageSize;
        this.formInline.total = x.data.total;
      })
    }
  },
  //Vue的侦听器
  watch: {
    //进行深度监听
    'form.scExamScore': {
      deep: true,
      handler: function (newV, oldV) {
        if (this.form.scExamScore != null && this.form.scExamScore.length > 0)
          this.form.scScore = parseInt((parseInt(this.form.scDailyScore) + parseInt(this.form.scExamScore)) / 2)
      }
    },
    'form.scDailyScore': {
      deep: true,
      handler: function (newV, oldV) {
        if (this.form.scDailyScore != null && this.form.scDailyScore.length > 0)
          this.form.scScore = parseInt((parseInt(this.form.scDailyScore) + parseInt(this.form.scExamScore)) / 2)
      }
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
#fu {
  padding: 0 15px;
  background-color: rgb(240, 240, 240);
}

#desc {
  font-size: 14px;
  padding: 15px 0;
}

.contine {
  background-color: white;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 10px 30px;
}

.el-nav {
  text-align: center;
  margin-bottom: 10px;
}
</style>
